<template>
  <div class="wflow-form">
    <el-button @click="()=>{ 
      this.$router.push('/antV-test')
    }">跳转antV</el-button>
    <el-container style="height: calc(100vh - 65px)">
      <!-- 左侧组件集合 -->
      <el-aside>
        <div class="component-collection">
          <div class="components" v-for="(group, i) in baseComponents" :key="i">
            <p class="group-name">{{ group.name }}</p>
            <ul class="component-items">
              <draggable class="drag" :list="group.components" v-bind="{ sort: false }"
                :group="{ name: 'form', pull: 'clone', put: false }" @start="isStart = true" @end="isStart = false"
                :clone="cloneNode">
                <li class="component-item" v-for="(component, id) in group.components" :key="id">
                  <i :class="component.icon"></i>
                  <span>{{ component.title }}</span>
                </li>
              </draggable>
            </ul>
          </div>
        </div>
      </el-aside>
      <!-- 中间预览部分 -->
      <el-main class="layout-main">
        <div class="work-form">
          <div class="mobile">
            <div class="mobile-background">
              <div class="mobile-title">首页</div>
              <div class="form-content">
                <div class="form">
                  <div class="tip" v-show="forms.length === 0 && !isStart">
                    请在左侧选择控件并拖至此处
                  </div>
                  <draggable class="drag-from" :list="forms" group="form" v-bind="draggableFormOptions" @start="selectFormItem = null">
                    <div v-for="(component, id) in forms" :key="id" class="form-item" @click="selectItemEvent(component)"
                      :style="setSelectedStyleEvent(component)">
                      <div class="form-header">
                        <!-- 头部操作 -->
                        <p>{{ component.title }} </p>
                        <div class="option">
                          <!-- <i class="el-icon-copy-document" @click="copyComponentEvent(component, id)"></i> -->
                          <i class="el-icon-close" @click="deleteComponentEvent(id)"></i>
                        </div>
                        <!-- 组件信息 -->
                        <form-design-render :config="component" />
                      </div>
                    </div>
                  </draggable>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <!-- 右侧详细配置 -->
      <el-aside class="layout-param">
        <div class="save-template-button" v-show="forms.length !== 0">
          <el-button plain size="mini" @click="saveTemplateEvent">保存模板</el-button>
          <!-- <el-button plain size="mini">退出</el-button> -->
        </div>
        <div class="tool-nav-r" v-if="selectFormItem">
          <i :class="selectFormItem.icon" style="margin-right: 5px; font-size: medium"></i>
          <span>当前选中区域 -- {{ selectFormItem.title }}</span>
        </div>
        <div v-if="!selectFormItem || forms.length === 0" class="tip">
            选中控件后在这里进行编辑
        </div>
        <div style="text-align: left; padding: 10px" v-else>
          <form-component-config />
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import wflowFormTest from './wflow-form-test.js';
export default wflowFormTest;
</script>

<style lang="less"  scoped>
@import "./wflow-form-test.css";
</style>